<template>
  <div class="agentedit">
    <el-dialog :title="text" :visible.sync="dialogEdit" width="60%">
      <el-form ref="form" :model="form" size="medium" label-position="right">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">代理商ID</el-col>
              <el-col :span="16"><el-form-item prop="agent_id"><el-input v-model="form.agent_id" ></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">代理商名称</el-col>
              <el-col :span="16"><el-form-item prop="agent"><el-input v-model="form.agent" readonly></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">代理商级别</el-col>
              <el-col :span="16">
                <el-form-item prop="agent">
                  <el-select v-model="form.agent_level" filterable clearable placeholder="代理商级别" style="width: 100%;">
                    <el-option
                      v-for="item in levelList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">电话</el-col>
              <el-col :span="16"><el-form-item prop="phone"><el-input v-model="form.phone" readonly></el-input></el-form-item></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">所属上级</el-col>
              <el-col :span="16">
                <el-form-item prop="agent">
                  <el-select v-model="form.uper" filterable clearable placeholder="所属上级" style="width: 100%;">
                    <el-option
                      v-for="item in upList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">所属下级</el-col>
              <el-col :span="16">
                <el-form-item prop="agent">
                  <el-select v-model="form.lower" filterable clearable placeholder="所属下级" style="width: 100%;">
                    <el-option
                      v-for="item in lowerList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-row>
              <el-col :span="4" class="ban-left">联系地址</el-col>
              <el-col :span="20">
                <el-form-item>
                  <v-distpicker :province="form.province" :city="form.city" :area="form.area" @selected="selected"></v-distpicker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">地址详情</el-col>
              <el-col :span="16">
                <el-form-item prop="address_detail">
                  <el-input v-model="form.address_detail" placeholder="地址详情,如4号楼2单元"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="8" class="ban-left">商户状态</el-col>
              <el-col :span="16" style="padding-left: 15px;">
                <el-form-item prop="status">
                  <el-radio-group v-model="form.status">
                    <el-radio size="large" :label="0">启用</el-radio>
                    <el-radio size="large" :label="1">停止</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="ban-btn">
        <el-button @click="close">返 回</el-button>
        <el-button class="save" @click="ok('form')">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
  name: 'AgentEdit',
  components: { VDistpicker },
  props:{
    rows:{}
  },
  data() {
    return {
      text: '',
      dialogEdit: false,
      form: {
        agent_id: '',
        agent: '',
        agent_level: '',
        phone: '',
        uper: '',
        lower: '',
        address: '',
        province: '',
        city: '',
        area: '',
        address_detail: '',
        status: ''
      },
      levelList: [
        {value: '0',label: '总代理'},
        {value: '1',label: '一级代理'},
        {value: '2',label: '二级代理'}
      ],
      upList: [
        {value: '0',label: '--'}
      ],
      lowerList: [
        {value: '0',label: '--'},
        {value: '1',label: '测试门店'},
        {value: '2',label: '小明'}
      ]
    }
  },
  created() {
  },
  watch: {
      // immediate：true 将立即以表达式的当前值触发回调
      // handle：watch中需要具体执行的方法
      // deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化
    // rows: {
    //   handler(newval, oldVal) {
    //     this.form = newval;
    //   },
    //   deep: true
    // }
  },
  methods:{
    //编辑对话框
    openEdit() {
      this.text = "代理商编辑"
      this.dialogEdit = true;
      this.form = {
        agent_id: this.rows.agent_id,
        agent: this.rows.agent,
        agent_level: this.rows.agent_level,
        phone: this.rows.phone,
        uper: this.rows.uper,
        lower: this.rows.lower,
        address: '',
        province: '',
        city: '',
        area: '',
        address_detail: '',
        status: this.rows.status
      }
    },
    //新增对话框
    openAdd(){
      this.text = "增加代理商"
      this.dialogEdit = true;
    },

    // 省市区选择最后一项触发
    selected(data) {
    // 对象的遍历,添加到另一对象中
      for (var obj in data) {
        this.form[obj] = data[obj].value
      }
    },

    close() {
      this.dialogEdit = false;
      this.form = {
        agent_id: '',
        agent: '',
        agent_level: '',
        phone: '',
        uper: '',
        lower: '',
        address: '',
        province: '',
        city: '',
        area: '',
        address_detail: '',
        status: ''
      }
    },

    //保存表单
    ok () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.address = this.form.province + this.form.city +this.form.area + this.form.address_detail;
          console.log(this.form)
          this.dialogEdit = false;
          this.form = {
            agent_id: '',
            agent: '',
            agent_level: '',
            phone: '',
            uper: '',
            lower: '',
            address: '',
            province: '',
            city: '',
            area: '',
            address_detail: '',
            status: ''
          }
          this.$message.success('保存成功')
        } else {
          this.$message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>

<style>
</style>
